<!DOCTYPE html>
<style>
    .line { clear:both; }
    .fakeColumn { float:left; width:95px; margin-right:10px; }
    .wide { width:200px; }
    .egg { background:yellow; }
    .egg::before { content:"egg"; }
    .sausage { background:brown; }
    .sausage::before { content:"sausage"; }
    .spam { background:hotpink; }
    .spam::before { content:"spam"; }
    .lobster { background:salmon; }
    .lobster::before { content:"lobster"; }
</style>
<p>Below there should be 4 rows of boxes. The boxes on each row should have the same color.
    Some boxes are expected to be wider than others.</p>
<div style="line-height:30px;">
    <div class="line">
        <div class="fakeColumn egg wide"></div>
        <div class="fakeColumn egg"></div>
        <div class="fakeColumn egg"></div>
        <div class="fakeColumn egg"></div>
        <div class="fakeColumn egg"></div>
    </div>
    <div class="line">
        <div class="fakeColumn sausage"></div>
        <div class="fakeColumn sausage"></div>
        <div class="fakeColumn sausage"></div>
        <div class="fakeColumn sausage"></div>
        <div class="fakeColumn sausage"></div>
        <div class="fakeColumn sausage"></div>
    </div>
    <div class="line">
        <div class="fakeColumn spam wide"></div>
        <div class="fakeColumn spam"></div>
        <div class="fakeColumn spam"></div>
        <div class="fakeColumn spam"></div>
        <div class="fakeColumn spam"></div>
    </div>
    <div class="line">
        <div class="fakeColumn lobster"></div>
        <div class="fakeColumn lobster"></div>
        <div class="fakeColumn lobster"></div>
        <div class="fakeColumn lobster"></div>
        <div class="fakeColumn lobster wide"></div>
    </div>
</div>
